// import React from 'react'
import { Outlet,useNavigate } from "react-router-dom";
import "./index.scss";
import { Breadcrumb, Layout, Menu, theme } from "antd";
const { Header, Content, Footer } = Layout;
const items = [
  {
    key:'/layout/myspace/myspace_myspace',
    label: "我的空间",
  },
  {
    key:'/layout/myspace/drafts',
    label: "草稿箱",
  },
  {
    key:'/layout/myspace/favorites',
    label: "收藏夹",
  },
  {
    key:'/layout/myspace/recycleBin',
    label: "回收站",
  }
]
function MySpace() {
  const nav = useNavigate();
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  const onclick = (e)=>{
    nav(e.key)
  }
  return (
      <Layout >
      <Header
        style={{
          display: "flex",
          background:'#fff',
          marginTop:'-3%',
          marginLeft:'-2%',
          headerColor:'#939AA4'
        }}
      >
        <Menu
        onClick={onclick}
          theme="light"
          bodyBg="#fff"
          headerBg="#fff"
          headerColor='#939AA4'
          mode="horizontal"
          defaultSelectedKeys={["/layout/myspace/myspace_myspace"]}
          items={items}
          style={{
            flex: 1,
            minWidth: 0,
            margin:0
          }}
        />
      </Header>
      <Content>
        <div
          style={{
            background: colorBgContainer,
            minHeight: 280,
            padding: 24,
            borderRadius: borderRadiusLG,
          }}
        >
          <Outlet></Outlet>
        </div>
      </Content>
    </Layout>
  );
}

export default MySpace;